import "./index.scss";

export default {
  name: "AElFormItem",
  props: {
    prop: { type: String, default: null },
    data: { type: Object, default: () => ({}) },
    form: { type: Object, default: () => ({}) },
    updateData: { type: Function, default: () => null },
    aligning: { type: String, default: "left" }, // 数据的对其方式
  },
  methods: {
    /**
     * 将配置转为各种dom
     */
    formater(data) {
      // 从data中解构数据
      let { type = "input", children = [], on = null, render = null, ...rest } = data;


      // 出口
      if (render) return render(this.updateData, this.prop, this.form, this.data);

      // 获取回显值
      let { form = {}, prop = null } = this;

      // 设置props值
      let props = { ...rest, value: form[prop] };

      // 对placeholder进行一些处理
      let placeholder = this.handlePlaceholder(type, props.placeholder, props.label);

      // 生成不同类型组件
      switch (type) {
        case "select": return <el-select placeholder={placeholder} props={props} on={{ ...this.$listeners, ...on }}>{children.map(item => <el-option key={item.value} props={item} />)}</el-select>;
        case "radio": return <el-radio-group placeholder={placeholder} props={props} on={{ ...this.$listeners, ...on }}>{children.map(({ value = null, label = null, ...item }) => <el-radio key={item.value} props={item} label={value}>{label}</el-radio>)}</el-radio-group>;
        case "checkbox": return <el-checkbox-group props={props} on={{ ...this.$listeners, ...on }}>{children.map(({ value = null, label = null, ...item }) => <el-checkbox key={item.value} props={item} label={value}>{label}</el-checkbox>)}</el-checkbox-group>;
        case "switch": return <el-switch props={props} on={{ ...this.$listeners, ...on }}></el-switch>;
        case "number": return <el-input-number props={props} on={{ ...this.$listeners, ...on }}></el-input-number>;
        case "datetimerange": return <el-date-picker start-placeholder="开始日期" end-placeholder="结束日期" props={{ ...props, type }} on={{ ...this.$listeners, ...on }}></el-date-picker>;
        case "date": return <el-date-picker type="date" placeholder={placeholder} props={{ ...props, type }} on={{ ...this.$listeners, ...on }}></el-date-picker>;
        case "textarea": return <el-input type="textarea" placeholder={placeholder} props={{ ...props, type }} on={{ ...this.$listeners, ...on }}></el-input>;
        default: return <el-input placeholder={placeholder} props={{ ...props, type }} on={{ ...this.$listeners, ...on }}></el-input>;
      };
    },
    /**
     * 对placeholder进行处理
     */
    handlePlaceholder(type = "input", placeholder = null, label = null) {
      if (placeholder) return placeholder;
      switch (type) {
        case "select": return `请选择${label}`;
        case "radio": return `请选择${label}`;
        case "date": return `请选择${label}`;
        default: return `请输入${label}`;
      }
    }
  },
  render() {
    // 从实例中获取props数据
    let { aligning = "left" } = this;

    // 从实例中获取方法
    let { formater = () => null } = this;

    return (<div class="a-el-form-item" style={{ textAlign: aligning }}>{formater(this.data)}</div>)
  }
}